import React from 'react';
import {inject, observer} from 'mobx-react';
import {Popover, Checkbox, InputNumber} from "antd";
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('portalLoginStore')
@observer
class E9BgImageBox extends React.Component {
    render() {
        const {portalLoginStore} = this.props;
        const {state, setStateAndCache, onBgImageChange} = portalLoginStore;
        const {bgImagesInfo = [], initialSlide, autoCarousel, carouselTime} = state;

        const content = (
            <div className="e9login-bg-image-box-content">
                <div className="e9login-bg-image-box-toolbar">
                    <div className="e9login-bg-image-box-label" style={{marginRight: '20px'}}>{getLabel(387145, '单击切换背景')}</div>
                    <Checkbox checked={autoCarousel} onChange={() => setStateAndCache('autoCarousel', !autoCarousel)}>{getLabel(387146, '自动轮播')}</Checkbox>
                    <div className="e9login-bg-image-box-label">{getLabel(387147,"轮播速度:")}</div>
                    <InputNumber value={carouselTime} min={0} disabled={!autoCarousel} style={{width: '70px', marginTop: '-4px'}} onChange={value => setStateAndCache('carouselTime', value)}/>
                </div>
                <div className="e9login-bg-image-box-images">
                    {
                        bgImagesInfo.map((item, index) => {
                            const selectedClassName = index == initialSlide ? 'e9login-bg-image-box-image-selected' : '';
                            return <img src={item.imgsrc} alt="" className={`e9login-bg-image-box-image ${selectedClassName}`} onClick={() => onBgImageChange(item, index)}/>;
                        })
                    }
                </div>
            </div>
        );

        return (
            <Popover trigger="click" placement="topLeft" content={content}>
                <div className="e9login-bg-image-box-btn">
                    <div className="e9login-bg-image-box-btn-background"></div>
                    <div className="e9login-bg-image-box-btn-icon">
                        <i className="wevicon-e9login-palette"/>
                    </div>
                </div>
            </Popover>
        );
    }
}

export default E9BgImageBox;